<template>
    <div class="playground">
        <GameMap />
        <div class="user-color" v-if="$store.state.user.id == $store.state.pk.a_id">您是蓝色小蛇</div>
        <div class="user-color" v-if="$store.state.user.id == $store.state.pk.b_id">您是红色小蛇</div>
    </div>
</template>

<script>
import GameMap from './GameMap.vue';

export default {
    components: {
        GameMap,
    }
}
</script>

<style scoped>
div.playground {
    width: 60vw;
    height: 70vh;
    margin: 6% auto;
}

.user-color {
    text-align: center;
    font-size: 30px;
    font-weight: 600;
    color: white;
}
</style>